<template>
	<div class="store-head">
    <div class="bg" :style="{'background-image': `url(${store.storePhoto})`}">
      <div class="hover-editor">
        <button type="btn" class="btn fr" @click="editorHeader">编辑</button>
      </div>
  		<div class="top-bar clearfix"><img src="../../../assets/dianchidianliang.png" alt=""></div>
      <div class="top-middle">
        <div class="back-icon"><img src="../../../assets/btn_back_white.png" alt=""></div>
        <div class="search clearfix">
          <div class="search-icon fl"><img src="../../../assets/btn_search.png" alt=""></div>
          <input type="text" name="" placeholder="商品">
          <div class="cancel-search fr"><img src="../../../assets/btn_delete.png" alt=""></div>
        </div>
      </div>
      <div class="top-footer clearfix">
        <div class="fl store">
          <div class="store-logo">
            <img v-lazy="store.storeLogoUrl">
          </div>
          <div v-text="store.storeName"></div>
        </div>
        <div class="fr clect">
          <div class="clected"><img src="../../../assets/btn_like_white.png" alt=""></div>
          <div>收藏</div>
        </div>
      </div>
    </div>
    <!-- 编辑弹框 -->
    <div v-if="show">
      <w-panel-fixed-wrap class="cb pop" 
        v-model="show" 
        title="店铺顶部背景" 
        width="680px" 
        height="480px"
        @on-confirm="uploadStoreWapBg" 
        @on-cancel="hidePopup">
        <form :action="url" method="POST" enctype="multipart/form-data">
          <!-- 商品上传 -->
          <div class="up-img">
            <div class="bg small" :style="{'background-image': `url(${prevImage})`}" v-show="prevImage">
              <div class="top-bar clearfix"><img src="../../../assets/dianchidianliang.png" alt=""></div>
              <div class="top-middle">
                <div class="back-icon"><img src="../../../assets/btn_back_white.png" alt=""></div>
                <div class="search clearfix">
                  <div class="search-icon fl"><img src="../../../assets/btn_search.png" alt=""></div>
                  <input type="text" name="" placeholder="商品">
                  <div class="cancel-search fr"><img src="../../../assets/btn_delete.png" alt=""></div>
                </div>
              </div>
              <div class="top-footer clearfix">
                <div class="fl store">
                  <div class="store-logo">
                    <img v-lazy="store.storeLogoUrl">
                  </div>
                  <div v-text="store.storeName"></div>
                </div>
                <div class="fr clect">
                  <div class="clected"><img src="../../../assets/btn_like_white.png" alt=""></div>
                  <div>收藏</div>
                </div>
              </div>
            </div>
            <div class="btn main up-button" :class="{'change': prevImage}">
              {{prevImage ? '更换图片' : '上传图片'}}
              <input type="file" name="storePhoto" @change="revertFilePath($event.target)" accept="image/jpeg,image/gif,image/png">
              <input type="hidden" name="accessToken" :value="$store.getters.token">
            </div>
          </div>
          <p class="tip">请上传750*240(PX)尺寸的图片</p>
        </form>
      </w-panel-fixed-wrap>
    </div>
	</div>
</template>

<script>
  // 首页的店家信息
  import { apiHomeStoreInfo } from '../../../common/api'

  // 导入api
  import { API } from '../../../common/config'

  // 获取文件真实路径
  import { isImageFile, getFileRealPath } from '../../../common/util'

  export default {
    data() {
      return {
        show: false,
        showPre: false,
        prevImage: '',
        // 店铺信息
        store: {}
      }
    },
    computed: {
      url() {
        return `${API}decoration/setStoreBg`
      }
    },
    created() {
      this.handlerHomeInfo()
    },
    methods: {
      /**
       * 转变文件路径
       *
       * @param { Object } file 待上传文件的属性
       */
      revertFilePath(file) {
        // 校验是否是图片
        if (!isImageFile(file)) {
          this.$toast('请上传图片类型的文件')
          return
        }

        // 获取文件路径
        this.prevImage = getFileRealPath(file)
      },

      editorHeader() {
        this.show = true
      },
      hidePopup() {
        // 关闭弹框
        this.show = false

        // 清空预览图
        this.prevImage = ''
      },
      showPopUp() {
        this.show = true
      },

      /**
       * 展示一下背景
       *
       * @params { Object } target 当前操作的对象
       */
      setStoreBgToPop(target) {
        this.showPre = true

        let reader = new FileReader()
        reader.onload = (function (file) {
          return function (e) {
            $('.photo.small').css('background-image', this.result)
          }
        })(target)
      },

      selectGoodsOrLink(type) {
        this.wordType = type
      },

      /**
       * 查询首页信息
       */
      handlerHomeInfo() {
        apiHomeStoreInfo(this.$store.getters.token).then((data) => {
          this.store = data
        })
      },

      /**
       * 删除wap店铺的背景图片
       */
      uploadStoreWapBg() {
        // 获取this对象
        let $this = this

        // ajax上传form表单
        $('form').ajaxSubmit((data) => {
          if (data.code == 200) {
            // 加载首页数据
            $this.handlerHomeInfo()

            // 关闭弹框
            $this.show = false

            // 清空预览图
            $this.prevImage = ''
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .small {
    width: 750px;
    height: 228px;
    transform: scale(0.78);
    position: absolute;
    top: 15px;
    left: -43px;
  }
  .store-head {
    background-color: #d9d9d9;
    position: relative;

    .bg {
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-color: lightgrey;
    }

    &:hover {
      .hover-editor {
        display: block;
      }
    }
    .hover-editor {
      display: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: rgba(222,175,200,0.5);
      padding: 10px;
      .btn {
        width: 120px;
        height: 40px;
        background-color: #f20685;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
      }
    }
    .top-bar {
      padding: 8px 24px;

      div {
        display: inline-block;
        width: 30%;
        .signal {
          padding: 0 10px;
        }
        &:nth-child(2) {
          text-align: center;
        }
        &:nth-child(3) {
          text-align: right;
        }
      }
    }
    .top-middle {
      padding: 14px 24px;
      .back-icon {
        display:inline-block;
        width: 16px;
        height: 30px;
        vertical-align: middle;
        margin-right: 84px;
      }
      .search {
        display:inline-block;
        width: 500px;
        height: 50px;
        background-color: #fff;
        padding: 5px 10px;
        vertical-align: middle;
        input {
          padding-left: 6px;
          height: 100%;
          width: 400px;
          font-size: 24px;
        }
        .search-icon {
          width: 40px;
          height: 40px;
        }
        .cancel-search {
          width: 40px;
          height: 40px;
        }
      }
    }
    .top-footer {
      padding: 20px 30px;
      .store {
        div {
          display: inline-block;
          font-size: 28px;
          color: #fff;
          vertical-align: middle;
        }
        .store-logo {
          width: 60px;
          height: 60px;
          background-color: #fff;
        }
      }
      .clect {
        font-size: 20px;
        color: #fff;
        text-align: center;
        .clected {
          width: 40px;
          margin-bottom: 10px;
          height: 34px;
        }
      }
    }

    .up-img {
      width: 604px;
      height: 260px;
      border: 1px solid #ddd;
      text-align: center;
      padding: 12px 10px;

      .up-button {
        margin-top: 110px;
        position: relative;
        overflow: hidden;
        line-height: 26px;

        input[type=file] {
          cursor: pointer;
          position: absolute;
          opacity: 0;
          width: 1000px;
          height: 1000px;
          top: 0px;
          left: 0px;
        }

        &.change {
          margin-top: 195px;
        }
      }
    }

    .tip {
      color: #ff9342;
      font-size: 14px;
      padding: 12px;
    }
  }
</style>